<template>
  <div class="container" v-loading="isLoading">
    <el-card :key="isKey">
      <template #header>
        <div class="table_tool">
          <el-button
            type="primary"
            icon="el-icon-plus"
            @click="add()"
            >新增</el-button
          >
        </div>
      </template>

      <el-table :data="tableData" border>
        <el-table-column prop="roleName" label="权限名称" />
        <el-table-column prop="roleType" width="200px" label="权限类型" />
        <el-table-column prop="id" label="权限id" />
        <el-table-column prop="fatherId"  label="父菜单id" />
        <!-- <el-table-column prop="target"  label="target" /> -->
        <!-- <el-table-column prop="url" label="url" /> -->
        <el-table-column label="操作" width="200px" align="center">
          <template slot-scope="{ row }">
            <el-button
              type="text"
              @click="openEditRow(row.id)"
              >编辑</el-button
            >
            <el-button
              type="text"
              class="red"
              @click="delRowById(row.id)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>

    </el-card>

    <footer class="footer">
      <el-pagination
        background
        layout="total, sizes, pager, jumper"
        :current-page="searchForm.page"
        :page-sizes="[20, 30, 50, 100]"
        :page-size="searchForm.page_size"
        :total="tableTotal"
        @size-change="changeSize"
        @current-change="changeCurrent"
      />
    </footer>

    <el-dialog
      :title="houseForm.$id ? '编辑' : '新增'"
      :visible.sync="showAddOrEdit"
      width="1000px"
      @closed="resetForm()"
    >
      <el-form
        :model="houseForm"
        ref="houseForm"
        label-width="6em"
      >
        <el-form-item label="权限名称" prop="name" >
          <el-input
            v-model="houseForm.name"
            placeholder="请输入权限名称"
          ></el-input>
        </el-form-item>

        <el-form-item label="权限路由"  prop="url">
          <el-input
            v-model="houseForm.url"
            placeholder="请输入权限路由"
          ></el-input>
        </el-form-item>

        <el-form-item label="是否为菜单" prop="admin_resource_type_id">
          <el-switch v-model="houseForm.admin_resource_type_id"></el-switch>
        </el-form-item>

        <el-form-item label="资源目标"  prop="target">
          <el-input
            v-model="houseForm.target"
            placeholder="请输入资源目标"
          ></el-input>
        </el-form-item>

        <el-form-item label="父权限id"  prop="admin_resource_id">
          <el-input
            v-model="houseForm.admin_resource_id"
            placeholder="请输入父权限id"
          ></el-input>
        </el-form-item>

      </el-form>
      <template #footer>
        <el-button
          type="primary"
          @click="submitRowData()"
          :loading="loading.update"
          >确 定</el-button
        >
      </template>
    </el-dialog>

  </div>
</template>

<script>
import API from '@/api';
import Tinymce from "@/components/Tinymce";
import {getStorage} from "@/utils/service/auth";
import { Message } from "element-ui";
import Upload from "@/components/Upload/SingleImage.vue";
import RealName from '@/components/RealName.vue';
export default {
  components: {
    Tinymce,
    Upload,
    RealName
  },

  data: () => ({
    showAddOrEdit:false,
    isLoading: true,
    tableData:[],
    tableTotal: 0,
    isKey: false,
    isAdmin:false,
    searchForm: {
      page: 1, // 当前页码
      per_page: 20, // 每页条数
    },
    houseForm: {
      $id: '',
      name: "",  //资源名称
      url:'', //权限路由
      icon_cls:"",
      target:"",//资源目标
      admin_resource_type_id:false, //1 菜单 2 功能
      admin_resource_id:'', //父权限
    },
  }),


  created:function(){
    this.getPermissionList()
    this.isAdmin=getStorage("userInfo").wx_openid_id==1?true:false
  },

  methods: {
    // 获取权限列表
    getPermissionList(){
      this.loading=true
      API.getPermissionList(this.searchForm)
        .then(({data}) => {
          let roleList = data.map(item=>{
            return {
              id:item.id,
              roleName:item.name,
              roleType:item.admin_resource_type.name,
              fatherId:item.pid,
              target:item.attributes.target,
              url:item.attributes.url
            }
          })
          this.tableData=roleList
          this.tableTotal=roleList.length
        }).catch((err) => {
        }).finally(() =>{
          this.isLoading = false;
        })
    },

    // 分页
    changeSize(val){
      this.searchForm.per_page = val
      this.searchForm.page = 1
      this.getPermissionList()
    },

    // 分页
    changeCurrent(val){
      this.searchForm.page = val
      this.getPermissionList()
    },

    add(){
      this.houseForm.$id=""
      this.showAddOrEdit=true
    },

    // 打开弹窗
    openEditRow(id){
      if(this.isAdmin){
        this.houseForm.$id=id
        API.permissionDetail(id)
        .then(({data}) => {
          this.houseForm.$id=data.id
          this.houseForm.name=data.name,
          this.houseForm.url=data.attributes.url,
          this.houseForm.target=data.attributes.target,
          this.houseForm.icon_cls='',
          this.houseForm.admin_resource_type_id=data.admin_resource_type.name=="菜单"?true:false,
          this.houseForm.admin_resource_id=data.pid
        }).catch((err) => {
        }).finally(() =>{
          this.showAddOrEdit=true
        })
      }else{
        Message.error("该账号暂无该权限！");
      }

      
    },

    // 删除
    delRowById(id){
      let _that=this
      if(this.isAdmin){
        API.deletePermission(id)
        .then(({data}) => {
        }).catch((err) => {
        }).finally(() =>{
          _that.getPermissionList()
        })
      }else{
        Message.error("该账号暂无该权限！");
      }

      
      
    },

    // 提交
    submitRowData(){
      if(this.isAdmin){
        let data={
          name:this.houseForm.name,
          url:this.houseForm.url,
          target:this.houseForm.target,//资源目标
          admin_resource_type_id:this.houseForm.admin_resource_type_id?"1":"2", //1 菜单 2 功能
          admin_resource_id:this.houseForm.admin_resource_id, //父权限
          icon_cls:"",
        }
        if(this.houseForm.$id){
          let id=this.houseForm.$id
          data.id=id
          API.editPermission(id,data)
          .then(({data}) => {
            this.$message.success("编辑成功！");
          }).catch((err) => {
          }).finally(() =>{
            this.resetForm()
            this.getPermissionList()
          })
        }else{
          API.addPermission(data)
          .then(({data}) => {
            this.$message.success("新增成功！");
          }).catch((err) => {
          }).finally(() =>{
            this.resetForm()
            this.getPermissionList()
          })
        }
      }else{
        this.resetForm()
        Message.error("该账号暂无该权限！");
      }
    },

    // 重置弹窗
    resetForm(){
      this.houseForm.$id=""
      this.houseForm.name=""
      this.houseForm.url=""
      this.houseForm.target=""
      this.houseForm.icon_cls='',
      this.houseForm.admin_resource_type_id=false
      this.houseForm.admin_resource_id=""
      this.showAddOrEdit=false
    },

  },
};
</script>

<style lang="scss" scoped>
  ::v-deep{
    .el-input .el-input__inner{
      border-radius:4px !important;
    }
    .el-switch{
      transform:translateY(6px)
    }
  }
</style>
